<template>
  <!-- 封号用户数据表格 -->
  <n-data-table ref="table" :columns="columns" :data="data" :pagination="pagination"  />
  <!-- 穿梭器 -->
  <n-space vertical>
    <n-transfer class="transfer1" ref="transfer" v-model:value="value" :options="options" size="large" target-title="封号用户" />
<!--    <n-transfer class="transfer2" ref="transfer" v-model:value="value" :options="options" size="large"/>-->
  </n-space>
</template>

<script>
// 封号用户数据表格
export default {
  name: 'IllegalOperation',
  data () {
    return {
      data,
      columns,
      pagination: {
        page: 2,
        pageSize: 5,
        showSizePicker: true,
        pageSizes: [3, 5, 7],
        onChange: (page) => {
          this.pagination.page = page
        },
        onPageSizeChange: (pageSize) => {
          this.pagination.pageSize = pageSize
          this.pagination.page = 1
        }
      },
      // 穿梭器
      options: createOptions(),
      value: createValues()
    }
  }
}
const columns = [
  {
    title: '昵称',
    key: 'name'
  },
  {
    title: '等级',
    key: 'grade'
  },
  {
    title: '封号理由',
    key: 'reason'
  },
  {
    title: '封号时长',
    key: 'time'
  }
]
const data = Array.apply(null, { length: 46 }).map((_, index) => ({
  key: index,
  name: `用户 ${index}`,
  grade: 32,
  reason: `London, Park Lane no. ${index}`,
  time: 425 + 's'
}))
// 穿梭器
function createOptions () {
  return Array.apply(null, { length: 20 }).map((v, i) => ({
    label: 'Option' + i,
    value: i,
    disabled: i % 5 === 0
  }))
}
function createValues () {
  return Array.apply(null, { length: 5 }).map((v, i) => i)
}
</script>

<style scoped>
  /* 封号用户表格 */
  .n-data-table{
    width:1280px;
    margin:13px 9px 0 9px;
    text-align: center;
    /*border: red solid 1px;*/
    padding: 0 0 12px 0;
  }
   /* 穿梭器 */
  .n-space{
    width:1280px;
    margin: 0 9px;
    /*border: red 1px solid;*/
    /*position: absolute;*/
  }
  .n-space .n-transfer{
    margin: 0px auto;
    width: 100%;
  }
  .n-space .n-transfer .transfer1{
    /*position: relative;*/
    float: right;
    margin: 0px 4px 0 0;
    border: green 5px solid;
  }
  /*.n-space .n-transfer .transfer2{*/
  /*  !*position: relative;*!*/
  /*  float: left;*/
  /*  margin-left: 1000px;*/
  /*  border: gold 5px solid;*/
  /*}*/
</style>
